<template>
	<view>
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-red-yellow" :isBack="true" backText="返回" title="评论详情"></cu-custom>
		<view class="comment" >
			<comment-item id="parent" :info="info" :gotoFlag="false" @reply="reply($event)"></comment-item>
			<view class="title">
				<text class="text-gray" style="padding-right: 20rpx; font-size: 32rpx;">——</text><text>全部回复</text><text class="text-gray" style="padding-left: 20rpx; font-size: 32rpx;">——</text>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<view class="comment" v-if="showComment" style="padding-bottom: 110rpx;">
				<comment-item v-for="(item,index) in commentList" :key="index" :gotoFlag="false" :info="item" @reply="reply($event)"></comment-item>
			</view>
		</mescroll-body>
		<view class="cu-bar foot-zh input" style="height: 110rpx;padding-right:0rpx">
			<view @tap="comment" class="round" style="width: 100%;height: 70rpx;margin: 0 30rpx 0 30rpx;background-color: #f2f2f2;color: #999999;display: flex;align-items: center;" >
				<text style="margin-left: 38rpx;">回复{{parentNikeName}}:</text>
			</view>
		</view>
		<uni-popup  ref="addComment" type="bottom">
			<view class="add-comment">
				<view class="info">
					<view class="input">
						<textarea
							:cursor-spacing="20"
							:show-confirm-bar="false"
							:auto-height="true"
							:fixed="true"
							:maxlength="200"
							:focus="addCommentFocus"
							v-model.trim="commentContent"
							placeholder-class="input-placeholder-class"
							:placeholder="replyFlag? '回复 ' + parentNikeName + '：' : '发表评论'"
						/>
					</view>
					<view class="add">
						<button class="cu-btn bg-gradual-red-yellow round" @click="addCommentOrReply()" style="width: 150rpx;">回复</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import api from '@/api/system/article.js';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				info:{},
				downOption: {
					use:true,
					auto: true //是否在初始化后,自动执行downCallback; 默认true
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						use : true ,
						icon : null , 
						tip: '还没有回复，快来说两句吧~'
					}
				},
				articleId:null,
				commentList:[],
				showPageLoading: true,
				addCommentFocus: false,
				commentContent:'',
				replyFlag:true,
				parentNikeName:'匿名',
				parentCommentId:null,
				replyId:null,
				showComment:false
			}
		},
		onLoad(option) {
			this.info=option
			this.info.replyCount = 0
			this.parentCommentId=option.commentId	
			this.replyId=option.commentId
			this.articleId = option.articleId
			if(option.openAddComment){
				this.openAddComment()
			}
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.showComment = false
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				const data={}
				data.pageNum=page.num
				data.pageSize=page.size
				this.getCommentList(data)
			},
			getCommentList(data){
				data.articleId=this.articleId
				data.parentCommentId=this.info.commentId
				data.replyFlag='1'
				this.$http.post(api.getCommentList, data).then(res => {
					this.showComment = true
					this.showPageLoading = false
					//联网成功的回调,隐藏下拉刷新的状态
					const result = res.result
					//设置列表数据
					if(this.mescroll.num == 1) {
						this.commentList = []; //如果是第一页需手动置空列表
					}
					this.commentList=this.commentList.concat(result.list);
					console.log(this.commentList)
					//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
					const hasNextPage = result.hasNextPage
					this.mescroll.endSuccess(result.size,hasNextPage);
					
					// 如果数据较复杂,可等到渲染完成之后再隐藏下拉加载状态: 如
					this.$nextTick(()=>{
						this.mescroll.endSuccess(result.size)
					})
					
				}).catch(error => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.showPageLoading = false
					this.mescroll.endErr();
				})
			},
			comment(){
				this.parentCommentId=this.info.commentId
				this.parentNikeName=this.info.nikeName?this.info.nikeName:'匿名'
				this.replyId=this.info.commentId
				this.openAddComment()
			},
			reply(e){
				if(!this.replyFlag){
					this.replyFlag = true
					this.commentContent = ''
				}else{
					if(this.replyId!=e.commentId){
						this.commentContent = ''
					}
				}
				if(e.parentCommentId){
					this.parentCommentId = e.parentCommentId
				}else{
					this.parentCommentId = e.commentId
				}
				this.parentNikeName = e.nikeName?e.nikeName:'匿名'
				this.replyId = e.commentId
				this.openAddComment()
			},
			/*初始化添加评论*/
			openAddComment() {
				this.$refs.addComment.open()
				setTimeout(() => {
					this.addCommentFocus = true;
				}, 200);
			},
			/*添加评论或回复*/
			addCommentOrReply() {
				if (!this.commentContent||this.commentContent == '') {
					this.$refs.uToast.show({
						title: '发表内容不能为空',
						// 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
						type: 'warning', 
						position:'top',
						// 如果不需要图标，请设置为false
						icon: false
					})
					return;
				}
				this.addComment();
			},
			
			/*添加评论*/
			addComment() {
				const data={}
				data.articleId=this.articleId
				if(this.replyFlag){
					data.replyFlag='1'
				}else{
					data.replyFlag='0'
				}
				data.commentContent = this.commentContent
				data.parentCommentId = this.parentCommentId
				data.replyId = this.replyId
				this.$http.post(api.addComment, data).then(res => {
					this.$refs.addComment.close()
					this.commentContent = ''
					this.parentCommentId=this.info.commentId
					this.parentNikeName=this.info.nikeName?this.info.nikeName:'匿名'
					this.replyId=this.info.commentId
					this.downCallback()
				}).catch(error => {
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.comment {
	padding: 0 30rpx;
	background: #fff;
	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #303133;
		font-weight: bold;
		padding-top: 20rpx;
		text {
			padding-bottom: 20rpx;
			line-height: normal;
		}
		.count {
			padding-bottom: 20rpx;
			font-size: 28rpx;
			color: #909399;
			margin-left: 10rpx;
			line-height: normal;
		}
	}
	.no-comment {
		padding: 20rpx 0;
		color: #999;
		font-size: 30rpx;
	}
}
.add-comment {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 9999;
	.info {
		display: flex;
		flex-direction: row;
		padding: 20rpx 20rpx 20rpx 20rpx;
		.input {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			align-items: center;
			background: #f2f2f2;
			border-radius: 40rpx 40rpx 0 40rpx;
			padding: 20rpx 32rpx 20rpx;
			line-height: normal;
			textarea {
				//padding: 10rpx 0;
				width: 100%;
				font-size: 28rpx;
				line-height: 42rpx;
				background: #f2f2f2;
			}
		}
		.add {
			flex-grow: 0;
			flex-shrink: 0;
			width: 150rpx;
			display: flex;
			align-items: center;
			margin-left: 10rpx;
		}
		
	}
}
.input-placeholder-class {
	color: $uni-text-color-placeholder;
	font-size: 28rpx;
}
</style>
